<template>
  <div>
    <div style="margin-bottom: 10px">
      <el-button @click="download"><svg-icon iconClass="export" class="mr-[5px]"></svg-icon>导出</el-button>
    </div>
    <div>
      <el-table border style="width: 100%" :data="tableData" row-key="id" @sort-change="handleSortChange">
        <!--        :load="loadChildren"-->
        <!--        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"-->
        <!--        @sort-change="handleSortChange"-->
        <el-table-column width="300" prop="projectTypeCodeName" label="项目分类" sortable="project_type_code_name"></el-table-column>
        <el-table-column prop="authorizeDate" label="立项年度" sortable="AUTHORIZE_DATE"></el-table-column>
        <el-table-column prop="executeYear" label="执行周期" sortable="execute_year"></el-table-column>
        <el-table-column label="到账率" sortable="incomeRate">
          <template #default="{ row }">
            <el-progress
              :percentage="row.incomeRate!== null? parseFloat(row.incomeRate.replace('%', '')) : 0"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="执行率" sortable="executeRate">
          <template #default="{ row }">
            <el-progress
              :percentage="row.executeRate!== null? parseFloat(row.executeRate.replace('%', '')) : 0"></el-progress>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="300">
          <template #default="scope">
            <el-button plain type="primary" size="small" @click="handleXYJU(scope.row)">学院进度</el-button>
            <el-button plain type="primary" size="small" @click="handleXMJD(scope.row)">项目进度</el-button>
            <el-button plain type="primary" size="small" @click="handleKMJD(scope.row)">科目进度</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="example-pagination-block">
        <el-pagination layout="->,prev, pager, next, total" :total="count" currentPage1="10"
          @current-change="handleCurrentChange" />
      </div>
    </div>



  </div>
  <zxjdDialogxyjd ref="Dialogxyjd"></zxjdDialogxyjd>
  <zxjdDialogxmjd ref="Dialogxmjd"></zxjdDialogxmjd>
  <zxjdDialogkmjd ref="Dialogkmjd"></zxjdDialogkmjd>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import {
  list,
  exports,
} from '../../../api/money/zxjdApi'
import {handleFileDownload} from './../../../utils/downloadSz'

const Dialogkmjd = ref(null)
const Dialogxmjd = ref(null)
const Dialogxyjd = ref(null)
import zxjdDialogxmjd from './zxjdDialogxmjd.vue'
import zxjdDialogxyjd from './zxjdDialogxyjd.vue'
import zxjdDialogkmjd from './zxjdDialogKMJD.vue'
import {ElMessage} from "element-plus";

const handleKMJD = (row) => {
  Dialogkmjd.value.openDialogKMJD(row)
}
const handleXMJD = function (row){
//   const rows = ref({
//
//     projectTypeCode: row.projectTypeCode,  //项目分类
//     authorizeDate: row.authorizeDate, //立项年度
//     executeYear: row.executeYear, //执行周期
//     unitId:row.unitId
//
// })
  Dialogxmjd.value.openDialogxmjd(row)
}

const handleXYJU = function (row){
//   const rows = ref({
//
//     projectTypeCode: row.projectTypeCode,  //项目分类
//     authorizeDate: row.authorizeDate, //立项年度
//     executeYear: row.executeYear, //执行周期
//     unitId:row.unitId
//
// })
  Dialogxyjd.value.openDialogxyjd(row)
}



const getListParme = defineModel();

const count = ref(0)
//树形生成唯一值
function addUniqueId(data) {
  function traverse(node, parentId = null) {
    const uniqueId = `${Date.now()}-${Math.random().toString(36).substr(2, 9)}`;
    node.id = uniqueId;
    node.parentId = parentId;
    if (node.children && node.children.length > 0) {
      node.children.forEach(child => traverse(child, uniqueId));
    }
    return node;
  }
  return data.map(item => traverse(item));
}

//请求列表
const getslist = function () {
  // 复制一份 getListParme 对象，避免修改原始数据
  const requestData = { ...getListParme.value };
  // 将 unitld 从数组转换为字符串
  if (Array.isArray(requestData.projectTypeCode)) {
    requestData.projectTypeCode = requestData.projectTypeCode.join(',');//项目分类
    requestData.executeYear = requestData.executeYear.join(',');//执行周期
  }
  list({
    pageNum:1,
    pageSize:10,
     ...requestData
  }).then((res)=>{
    count.value = res.total
    tableData.value = res.data
    addUniqueId(tableData.value)
    console.log( addUniqueId(tableData.value))
  })

}

// 初始表格数据
const tableData = ref([
//   authorizeDate: "2025"//立项年度
// beginDate: null
// chargerName: null
// executeRate: "0.00000088028169"//执行率
// executeYear: null //执行周期
// feeAuthorize: null
// incomeFee: null
// incomeRate: "24.4718309859" //到账率
// payoutFee: null
// projectId: null
// projectName: null
// projectTypeCode: "Z07"
// projectTypeCodeName: "国家自然科学基金"//项目分类
// unitId: null
// unitName: null
//   {
//     id: 1,
//     projectTypeCodeName: '科研项目',
//     authorizeDate: '2025',
//     executeYear: '2025 - 2026',
//     incomeRate: '80%',
//     executeRate: '70%',
//     hasChildren: true
//   },
//   {
//     id: 2,
//     projectTypeCodeName: '教学项目',
//     authorizeDate: '2024',
//     executeYear: '2024 - 2025',
//     incomeRate: '90%',
//     executeRate: '85%',
//     hasChildren: false
//   }
]);

const download = () => {
  // 复制一份 getListParme 对象，避免修改原始数据
  const requestData = { ...getListParme.value };
  // 将 unitld 从数组转换为字符串
  if (Array.isArray(requestData.projectTypeCode)) {
    requestData.projectTypeCode = requestData.projectTypeCode.join(',');//项目分类
    requestData.executeYear = requestData.executeYear.join(',');//执行周期
  }
  exports({
    ...requestData
  })
      .then((res)=>{
        if (!(res instanceof Blob)) {
          ElMessage({
            type: 'info',
            message: '响应数据不是 Blob 类型',
          })
        }else {
          handleFileDownload(res, '项目分类执行率');
        }
      })
}


// 处理排序变化的函数
const handleSortChange = (row)  => {
  getListParme.value.orderByColumn = row.column.sortable;
  getListParme.value.isAsc=row.order;
  getslist();
};

defineExpose({
  getslist
});
</script>

<style scoped>

</style>